<template>
  <div class="dashboard-container">
    <el-card class="tableBar mt-3">
      <el-row justify="space-between">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="分类名称">
            <el-input v-model="searchForm.name" style="width: 80%" placeholder="请输入分类名称" clearable />
          </el-form-item>
          <el-form-item label="分类类型">
            <el-select v-model="searchForm.type" placeholder="请选择分类类型" clearable>
              <el-option label="菜品分类" :value="1" />
              <el-option label="套餐分类" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="normal-btn continue" type="primary" @click="search">查询</el-button>
            <el-button class="normal-btn continue" @click="clear">清除</el-button>
          </el-form-item>
        </el-form>
        <el-row>
          <el-button type="info" :icon="Plus" @click="addCategory(1)">添加菜品分类</el-button>
          <el-button type="primary" :icon="Plus" @click="addCategory(2)">添加套餐分类</el-button>
        </el-row>
      </el-row>
    </el-card>
    <el-card class="mt-3">
      <el-table v-loading="loading" class="tableBox" :data="categoryList">
        <el-table-column align="center" width="100" type="index" label="序号" />
        <el-table-column align="center" width="150" prop="name" label="分类名称" />
        <el-table-column align="center" width="200" prop="type" label="分类类型">
          <template v-slot="{ row }">
            <el-tag v-if="row.type === 1" type="info">菜品分类</el-tag>
            <el-tag v-else type="success">套餐分类</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sort" label="分类排序" />
        <el-table-column align="center" width="200" label="分类状态">
          <template v-slot="{ row }">
            <el-switch
              v-model="row.status"
              inline-prompt
              active-text="启用"
              inactive-text="禁用"
              :inactive-value="0"
              :active-value="1"
              @change="changeCategoryStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="updateTime" label="操作时间" />
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" :icon="Edit" @click="updateCategory(row)">修改</el-button>
            <el-button type="danger" :icon="Delete" @click="deleteCategory(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="mt-3">
      <el-row justify="center" style="width: 100%" class="mt-3">
        <el-pagination
          class="pageList"
          :page-sizes="[5, 10, 20, 30]"
          layout="prev, pager, next, jumper, -> ,total, sizes"
          :total="pageData.total"
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </el-row>
    </el-card>
    <AddCategory :updateData="updateData" :type="categoryType" v-model="dialogShow" @update:model-value="updateList" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { Edit, Delete, Plus } from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox } from "element-plus"
import AddCategory from "./components/AddCategory.vue"
import { getCategoryListAPI, changeCategoryStatusAPI, deleteCategoryAPI } from "@/api/category"

// 分页数据
const pageData = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

// 加载状态
const loading = ref(false)

// 页码页数切换
const handleSizeChange = (val: number) => {
  pageData.value.pageSize = val
  getCategoryList()
}
const handleCurrentChange = (val: number) => {
  pageData.value.page = val
  getCategoryList()
}

// 添加分类弹窗
const dialogShow = ref<boolean>(false)

// 分类类型
const categoryType = ref<number>(1)

// 添加菜单分类
const addCategory = (type: number) => {
  categoryType.value = type
  dialogShow.value = true
}

// 更新列表
const updateList = () => {
  dialogShow.value = false
  updateData.value = {}
  getCategoryList()
}

// 分类列表
const categoryList = ref<any[]>([])

// 获取分类列表
const getCategoryList = async () => {
  const res = await getCategoryListAPI({
    page: pageData.value.page,
    pageSize: pageData.value.pageSize
  })

  if (res.code === 1) {
    categoryList.value = res.data.records
    pageData.value.total = res.data.total
  }
}

// 查询表单数据
const searchForm = ref({
  type: 1,
  name: ""
})

// 查询操作
const search = async () => {
  const res = await getCategoryListAPI({
    page: pageData.value.page,
    pageSize: pageData.value.pageSize,
    name: searchForm.value.name,
    type: searchForm.value.type
  })

  if (res.code === 1) {
    categoryList.value = res.data.records
    pageData.value.total = res.data.total
  }
}

// 清除
const clear = () => {
  searchForm.value = {
    type: 1,
    name: ""
  }
  // 重新查询数据
  pageData.value.page = 1
  getCategoryList()
}

// 分类状态切换
const changeCategoryStatus = async (item: any) => {
  const res = await changeCategoryStatusAPI(item.id, item.status)
  if (res.code === 1) {
    ElMessage.success("操作成功")
  } else {
    ElMessage.error(res.msg)
  }
}

// 当前需要修改的分类数据
const updateData = ref({})

// 修改分类
const updateCategory = (item: any) => {
  updateData.value = item
  dialogShow.value = true
}

// 删除分类
const deleteCategory = (item: any) => {
  ElMessageBox.confirm("确定删除该分类?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    const res = await deleteCategoryAPI(item.id)
    if (res.code === 1) {
      ElMessage.success("删除成功")
      getCategoryList()
    } else {
      ElMessage.error(res.msg)
    }
  })
}
onMounted(() => {
  getCategoryList()
})
</script>

<style lang="scss" scoped>
.disabled-text {
  color: #bac0cd !important;
}
::v-deep(.el-pager li) {
  border-radius: 5px !important;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
